<!-- -->
<template>
  <div class='pagination'>
    <el-pagination
      v-model:current-page="pageInfo.currentPage"
      v-model:page-size="pageInfo.pageSize"
      :page-sizes="[10, 20, 30, 50]"
      :size="size"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, -> next, jumper"
      :total="pageInfo.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup lang='ts'>
import { ref, reactive } from 'vue'

let props = defineProps({
  pageInfo: {
    type: Object,
    default: function() {
      return {
        currentPage: 1,
        pageSize: 10,
        total: 100
      }
    }
  },
  size: {
    type: String,
    defalut: 'default'
  },
  disabled: {
    type: Boolean,
    default: false
  },
  background: {
    type: Boolean,
    defalut: true
  }
})

const emit = defineEmits(['update:pageSize', 'update:currentPage'])

const handleSizeChange = (val: number) => {
  console.log(props.pageInfo);
  
  emit('update:pageSize', val)
  console.log(val);
  

}

const handleCurrentChange = (val: number) => {
  emit('update:currentPage', val)
}
</script>

<style lang='scss' scoped>
.pagination {
  display: flex;
  justify-content: right;
}
</style>
